<template>
  <div class="">
    <header>
      <img src="http://39.105.231.166:7002/static/img/111.c66af1e.jpg" alt="" />
      <div class="top">
        <van-icon @click="$router.go(-1)" name="arrow-left" />
      </div>
      <div class="input">
        <input placeholder="请输入礼券码" type="text" />
        <button @click="exchange">兑换</button>
      </div>
    </header>
    <rollCard @click="getRoll" btn="立即领取" :item="rollObj"></rollCard>
  </div>
</template>

<script>
import rollCard from "./rollCard.vue";
import { roll, rollCards } from "@/api/index.js";
import { ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    let rollObj = ref([]);
    let token = localStorage.getItem("token");
    function getRoll(id) {
      roll(id, token).then((res) => {
        console.log(res);
        Toast.fail("请勿重新领取");
      });
    }
    function exchange() {
      Toast.fail("功能暂未开放");
    }
    rollCards().then((res) => {
      console.log(res);
      rollObj.value = res;
    });

    return {
      getRoll,
      rollCards,
      rollObj,
      exchange,
    };
  },
  components: {
    rollCard,
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 520px;
  img {
    width: 100%;
    height: 100%;
  }
  position: relative;
  .top {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 40px;
  }

  input::-webkit-input-placeholder {
    color: #fa893d;
  }
  .input {
    width: 100%;
    height: 80px;
    padding: 0 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    input {
      width: 70%;
      border: 1px solid #fcb585;
      line-height: 65px;
      height: 65px;
      font-size: 28px;
      padding-left: 10px;
      border-radius: 10px;
    }
    position: absolute;
    top: 70%;
    button {
      width: 130px;
      height: 65px;
      border-radius: 0.06rem;
      color: white;
      background: #ee7c7b;
      text-align: center;
      line-height: 65px;
      font-size: 26px;
      outline: none;
      border: 0;
    }
  }
}
</style>
